import {ReactNode} from 'react'
import {compose, withState} from 'recompose'
import Router from 'next/router'
import {getStaticUrl} from '../util'

// type scaleImgPropsType = {
//     href: string,
//     src: string,
//     height: string,
//     children?: ReactNode,
//     state: { hover: boolean, leave: boolean },
//     setState: Function
// }

const ScaleImg = ({href, src, width, height, children, setState, state: {hover, leave}}) => {
    const style = {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
    }
    return (
        <div className={`scale ${hover ? 'hover' : (leave ? 'leave' : '')}`}
             onMouseOver={() => setState({hover: true})}
             onMouseLeave={() => setState({leave: true})}
             onClick={() => Router.push(href)}
        >
            <img src={getStaticUrl(src)} style={{...style,height:height}} width='100%'/>
            <div className='text'>
                {children}
            </div>

            <style jsx>{`
                .scale{
                    width: ${width};
                    height: ${height};
                    overflow: hidden;
                    background:#ccc;
                    cursor: pointer;
                    position: relative;
                }
                .hover img{
                    transform: scale(1.2);
                    -webkit-transform: scale(1.2);
                    transition: all 1s ease 0s;
                    -webkit-transition: all 1s ease 0s;
                }

                .leave img{
                    transform: scale(1);
                    -webkit-transform: scale(1);
                    transition: all 1s ease 0s;
                    -webkit-transition: all 1s ease 0s;
                }
                .text{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-start;
                    flex-direction: column;
                    flex-wrap: wrap;
                    padding: 2rem;
                    text-align: left;
                    width:100%;
                    height: auto;
                    z-index:10;
                }
            `}</style>
        </div>
    )
};

export default compose(
    withState('state', 'setState', {
        hover: false,
        leave: false
    }),
)(ScaleImg)